<template>
    <div>
        <!-- 头部 -->
        <div class="header flex align-center justify-between">
            <router-link to="/my">
                <van-icon name="arrow-left" color="#a36663" size="22" @click="handleBack" />
            </router-link>
            <p class="fs-28 color-main">我的收货地址</p>
            <van-icon name="shopping-cart" color="#a36663" size="22" />
        </div>
        <!-- 内容部分 -->
        <div class="box">
            <van-address-edit :area-list="areaList" show-postal show-delete show-set-default show-search-result
                :search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave"
                @delete="onDelete" @change-detail="onChangeDetail" :address-info="addressInfo"/>
        </div>
    </div>
</template>

<script setup>
import { computed, onMounted, reactive,ref } from 'vue';
import { areaList } from '@vant/area-data';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex'
import { Notify } from 'vant';

const VanNotify = Notify.Component;
let store = useStore()
let router = useRouter()
let route = useRoute()
const searchResult = ref([]);
let addressInfo = reactive({
    name: '张三丰',
    tel: '13966667777',
    addressDetail: '详细地址',
    areaCode: '130203',
    postalCode: '400000',
    isDefault: false
})

let addressList = computed(() => {
    return store.state.address.addressList
})
let idx = route.query.idx
addressInfo = addressList.value[idx]


const onSave = (content) => {
    let { province, city, county, addressDetail } = content
    content.address = province + city + county + addressDetail
    content.id = Math.random()
    if (idx == -1) {
        store.commit('address/addressAddMut', content)
        Notify({ type: 'success', message: '保存成功' })
    }else{
        store.commit('address/addressEditMut', {
            addressObj:content,
            editIdx:idx
        })
        Notify({ type: 'success', message: '编辑成功' })
    }
    router.back()
}
const onDelete = () => {
    let len = addressList.value.length
    for(let i=0;i<len;i++){
        if(i==idx){
            localStorage.removeItem('addressList.value[i]',0)
            // store.commit('address/addressInitMut') 
        }
    }
    router.back()
    Notify('删除成功');
}
const onChangeDetail = (val) => {
    if (val) {
        searchResult.value = [
            {
                name: '黄龙万科中心',
                address: '杭州市西湖区',
            },
        ];
    } else {
        searchResult.value = [];
    }
};

let handleBack = () => {
    router.back()
}
</script>

<style lang="less" scoped>
// 头部
.header {
    height: 9.8rem;
    background-color: #fff;
    padding: 0 2.1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 10;
}

//内容部分
.box {
    padding-top: 9.8rem;
}

:deep(.van-button--danger) {
    background-color: #492321;
    border-color: #492321;
}

:deep(.van-switch--on) {
    background: #492321;
}

:deep(.van-button--round) {
    border-radius: 0;
}
</style>